<template>
  <div>
    <div class="main-title">
      <img src="/chuneng/img/title-border-1.png" />
      <!-- <div style="text-align: center">
        <svg viewBoxs="0 0 600 500" style="width: 400px">
          <defs>
            <linearGradient
              id="SVGID_1_"
              gradientUnits="userSpaceOnUse"
              x1="0"
              y1="0"
              x2="0"
              y2="90"
            >
              <stop offset="0" style="stop-color: #ffffff" />
              <stop offset="0.9" style="stop-color: #6bdbfa" />
              <stop offset="1" style="stop-color: #6bdbfa" />
            </linearGradient>
          </defs>
          <text
            style="fill: url(#SVGID_1_); font-size: 40px; font-weight: bolder"
            text-anchor="middle"
            x="50%"
            y="50%"
          >
            储能装置运检策略
          </text>
        </svg>
      </div> -->
      <!-- 使用封装的cnsvg组件 -->
      <cn-svg
        :viewbox="'0 0 600 500'"
        :svgstyle="'width: 400px'"
        :textname="'运检策略自动生成模块'"
      ></cn-svg>
      <!-- <div
        style="
          position: relative;
          transform: translateY(-20px);
          padding-left: 17%;
        "
      >
        <input
          class="cell-input"
          type="select"
          placeholder="请输入储能装置编号："
          ref="input"
        />
        <div class="time-container">
          <span class="time-part date"></span>
          <span class="time-part time"></span>
        </div>
        <button class="btn-search">查询</button>
      </div> -->
      <!-- 使用封装的cnsearch,但未设置查询函数 -->
      <cn-search :placeholder="'请输入储能装置编号:'"></cn-search>
    </div>
    <div class="content">
      <div class="left sub-content" style="width: 22.33%">
        <div class="sub-title">
          <span
            >故障类型
            <img
              src="/chuneng/img/btn-a.png"
              style="width: 25px; height: 25px"
              @click="visible1 = true"
          /></span>
        </div>
        <div class="btn-container">
          <div v-for="item in type_list" :key="item">
            <button
              :class="
                current.length > 0 && current[0] === item ? 'activate' : ''
              "
              @click="
                () => {
                  onClickType(item);
                }
              "
            >
              {{ item }}
            </button>
          </div>
        </div>
      </div>
      <div class="center sub-content" style="width: 22.33%">
        <div class="sub-title">
          <span
            >故障表现
            <img
              src="/chuneng/img/btn-a.png"
              style="width: 25px; height: 25px"
              @click="visible2 = true"
          /></span>
        </div>

        <div class="btn-container">
          <div v-for="item in type_subs" :key="item">
            <button
              :class="
                current.length > 1 && current[1] === item ? 'activate' : ''
              "
              @click="
                () => {
                  onClickTypeSub(item);
                }
              "
            >
              {{ item }}
            </button>
          </div>
        </div>
      </div>
      <div class="right sub-content" style="width: 33.33%">
        <div class="file-list sub-content">
          <div class="sub-title">
            <span>故障处理记录</span>
          </div>
          <div class="file-container">
            <div class="list-header">
              <div style="width: calc(50%); float: left">故障类型与表现</div>
              <div style="width: 50%; float: left">时间</div>
            </div>
            <div class="list-out" ref="fileList">
              <div class="list-inner">
                <div
                  class="list-detail"
                  @click="
                    () => {
                      onHistoryClick(idx);
                    }
                  "
                  v-for="(item, idx) in historys"
                  :key="idx"
                >
                  <img src="/chuneng/img/files.png" />
                  <div
                    style="
                      width: calc(50% - 20px);
                      float: left;
                      margin-left: 3px;
                    "
                  >
                    {{ item.msg }}
                  </div>
                  <div style="width: 50%; float: left; padding-left: 25px">
                    {{ item.date }}
                  </div>
                </div>
              </div>
            </div>
            <!-- <div class="control">
              <div class="btn-up" @click="onScrollUp"></div>
              <div class="btn-down" @click="onScrollDown"></div>
            </div> -->
          </div>
        </div>
        <div class="result sub-content">
          <div class="sub-title">
            <span>基于知识引擎的判定结果</span>
          </div>
          <!-- <span class="sub-title">基于知识引擎的判定结果</span> -->
          <div class="res-content">
            <div>
              <!-- <p>描述：{{ data[current[0]][current[1]].description }}</p> -->
              <div class="res-detail">
                故障原因：<span v-if="current.length === 2"
                  ><span
                    v-for="(it, idx) in data[current[0]][current[1]].other[
                      '故障原因'
                    ]"
                    :key="idx"
                  >
                    {{ "①②③④⑤⑥⑦⑧⑨⑩"[idx] }}{{ it }}
                  </span>
                </span>
              </div>
              <div class="res-detail">
                处理方法：<span v-if="current.length === 2"
                  ><span
                    v-for="(it, idx) in data[current[0]][current[1]].other[
                      '处理方法'
                    ]"
                    :key="idx"
                  >
                    {{ "①②③④⑤⑥⑦⑧⑨⑩"[idx] }}{{ it }}
                  </span>
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog :visible.sync="visible1" destroy-on-close width="30%">
      <el-form :model="form1" label-width="80px" label-position="left">
        <el-form-item label="故障类型">
          <el-input v-model="form1.input"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible1 = false">取 消</el-button>
        <el-button type="primary" @click="onaddType1Ok">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog :visible.sync="visible2" destroy-on-close width="30%">
      <el-form
        :model="form2"
        ref="form2"
        :rules="rules"
        label-width="80px"
        label-position="left"
      >
        <el-form-item label="故障表现" prop="input1">
          <el-input v-model="form2.input1"></el-input>
        </el-form-item>
        <el-form-item label="故障原因" prop="input2">
          <el-input v-model="form2.input2"></el-input>
        </el-form-item>
        <el-form-item label="处理方法" prop="input3">
          <el-input v-model="form2.input3" type="textarea"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible2 = false">取 消</el-button>
        <el-button type="primary" @click="onaddType2Ok">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import cnSvg from "./cn-svg.vue";
import cnSearch from "./cn-search.vue";
import { getData } from "@/utils/http";
import { mapGetters } from "vuex";
export default {
  components: { cnSvg, cnSearch },
  name: "YunJian",
  data() {
    return {
      type_list: [],
      type_subs: [],
      data: {},
      historys: [],
      current: [],
      visible1: false,
      form1: {
        input: "",
      },
      visible2: false,
      form2: {
        input1: "",
        input2: "",
        input3: "",
      },
      rules: {
        input1: [
          { required: true, message: "请输入故障表现", trigger: "blur" },
        ],
        input2: [
          { required: true, message: "请输入故障原因", trigger: "blur" },
        ],
        input3: [
          { required: true, message: "请输入处理方法", trigger: "blur" },
        ],
      },
    };
  },
  props: {
    msg: String,
  },
  computed: {
    ...mapGetters(["current_stoke"]),
  },

  methods: {
    onScrollUp() {
      this.$refs["fileList"].scrollTop = 0;
    },
    onScrollDown() {
      this.$refs["fileList"].scrollTop = this.$refs["fileList"].scrollHeight;
    },
    onClickType(item) {
      this.current = [item];
      this.type_subs = Object.keys(this.data[item]);
    },
    onClickTypeSub(item) {
      this.current = [this.current[0], item];
      this.historys.push({
        keys: [this.current[0], item],
        msg: `${this.current[0]}-${item}`,
        date: new Date().toLocaleString(),
      });
    },
    onHistoryClick(i) {
      let keys = this.historys[i].keys;
      this.current = keys;
      this.type_subs = Object.keys(this.data[keys[0]]);
    },
    onaddType1Ok() {
      if (this.form1.input.length > 0) {
        this.type_list.push(this.form1.input);
        this.data[this.form1.input] = this.data[this.form1.input] || {};
      }
      this.visible1 = false;
    },
    onaddType2Ok() {
      this.$refs["form2"].validate((valid) => {
        if (valid) {
          // alert('submit!');
          this.visible2 = false;
          this.data[this.current[0]][this.form2.input1] = {
            description: this.form2.input1,
            other: {
              故障原因: [this.form2.input2],
              处理方法: [this.form2.input3],
            },
          };
          this.type_subs.push(this.form2.input1);
          this.historys.push({
            keys: [this.current[0], this.form2.input1],
            msg: `添加：${this.current[0]}-${this.form2.input1}`,
            date: new Date().toLocaleString(),
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    init() {
      getData()
        .then((data) => {
          this.data = data;
          this.type_list = Object.keys(this.data);
          this.historys = [];
          // for (let item in this.data) {
          //   for (let ii in this.data[item]) {
          //     this.historys.push({
          //       keys: [item, ii],
          //       msg: `${item}-${ii}`,
          //     });
          //   }
          // }
          if (this.current_stoke.key1 && this.current_stoke.key2) {
            // console.log(this.current_stoke);
            this.type_subs = Object.keys(this.data[this.current_stoke.key1]);
            this.current = [this.current_stoke.key1, this.current_stoke.key2];
            this.historys.push({
              keys: this.current,
              msg: `${this.current[0]}-${this.current[1]}`,
              date: new Date().toLocaleString(),
            });
            // this.type_list
          }
        })
        .catch(console.log);
    },
  },

  mounted() {
    this.init();
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.content {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-around;
  margin-top: 36px;
}

.content .sub-title {
  min-height: 55px;
  margin: 2px 0;
  line-height: 46px;
  border-radius: 15px;
  background: linear-gradient(
    to right,
    rgb(56, 93, 158),
    rgb(136, 164, 215),
    rgb(56, 93, 158)
  );
  padding: 2px 22px;
  box-sizing: border-box;
  color: #ffffff;
  text-shadow: 0 2px 2px rgb(67, 80, 105);
  font-size: 35px;
  font-weight: 600;
  text-align: center;
}

.btn-container {
  margin-top: 15px;
  background: rgb(180, 199, 231);
  margin-left: 5px;
  margin-right: 5px;
  padding: 25px;
  min-width: 200px;
  padding-top: 60px;
  padding-bottom: 40px;
  height: 80%;
  /* min-height: 500px; */
}

.content .sub-content {
  margin-bottom: 20px;
}

.content div button {
  width: 190px;
  height: 35px;
  background-image: url("/chuneng/img/btn-cl.png");
  color: rgba(0, 0, 0, 0.5);
  font-weight: 800;
  font-family: "仿宋", "Lucida Sans", "Lucida Sans Regular", "Lucida Grande";
  font-size: 24px;
  margin-bottom: 20px;
  background-color: transparent;
  width: 100%;
  /* height: 100%; */
  background-size: 100% 100%;
  border: none;
}
.content div button.activate {
  color: black;
  font-weight: 900;
}

.file-list {
  background: transparent;
  padding: 5px 0;
}
.file-container .list-header {
  background-color: rgb(180, 199, 231);
  font-weight: bold;

  text-align: left;
}
.file-container {
  margin-top: 15px;
  max-height: 23vh;
}
.file-container .list-header div {
  padding-left: 25px;
  background: rgb(180, 199, 231);
  border: solid 1px;
}

.file-container .list-out {
  background-color: rgb(180, 199, 231);
  margin-top: 15px;
  border: solid 1px;
  min-height: 100px;
  /* width: calc(100% - 30px); */
  margin-bottom: 0;
  max-height: 23vh;
  /* overflow: hidden; */
  position: relative;
  overflow-y: scroll;

  /* width: 200px; */
  /* overflow-y: scroll; */
}

.file-container .list-out .list-inner {
  /* position: absolute;
    left: 10px;
    overflow-x: hidden;
    overflow-y: scroll; */
  text-align: left;
}
/* .file-container .list-out::-webkit-scrollbar {
    width: 15px !important;
    border-radius: 4px; 
  } */

.file-container .list-out .list-inner .list-detail:hover {
  background: rgb(142, 172, 224);
  color: black;
}
.file-container .list-out .list-inner .list-detail {
  margin-bottom: 5px;
  background: rgb(180, 199, 231);
  padding-left: 9px;
  /* border-left: solid 3px #000000; */
  color: black;
  cursor: pointer;
  height: 25px;
}
.list-detail img {
  width: 13px;
  height: 23px;
  float: left;
}

.content .res-content .res-detail {
  background: rgb(180, 199, 231);
  padding: 15px;
  border: solid 1px;
  text-indent: 28px;
  font-size: 14px;
  text-align: left;
  margin-bottom: 20px;
}

.res-content {
  background: rgb(180, 199, 231);
  padding: 20px 20px 0px;
  box-sizing: border-box;
  border: solid 1px;
}
</style>
